<template>
  <div>
    <van-nav-bar
      :title="$route.meta.title"
      left-text="返回"
      left-arrow
      :fixed="true"
      :placeholder="true"
      @click-left="$router.go(-1)"
      :right-text="auditBtn"
      @click-right="editApply()"
    />
    <div>
      <div class="headerbox" v-if="columns.length > 1">
        <div class="header_top" :style="{ width: columns.length * 3 + 'rem' }">
          <div
            class="header_item"
            v-for="(item, index) in columns"
            :key="index"
            @click="handleClick(index)"
            :class="tabIndex == index ? 'active' : ''"
          >
            <div class="txt">{{ item.number }}</div>
            <div class="txt1">{{ item.bizDate }}</div>
          </div>
        </div>
      </div>

      <div class="carInfo">
        <div class="carInfo_title">入库信息</div>
        <div class="carInfo_item">入库单编号：{{ dataSource.billNumber }}</div>
        <div class="carInfo_item">入库类型：{{ dataSource.bizType }}</div>
        <div class="carInfo_item">单据状态：{{ dataSource.billStatus }}</div>
        <div class="carInfo_item">入库仓库：{{ dataSource.wareHouseName }}</div>
        <div class="carInfo_item">入库时间：{{ dataSource.bizDate }}</div>
        <div class="carInfo_item">
          所属品牌：{{ dataSource.departMentOrgName }}
        </div>
        <div class="carInfo_item">展厅：{{ dataSource.showOrgName }}</div>
        <div class="carInfo_item">预计到达日期：{{ dataSource.preDate }}</div>
        <div class="carInfo_item">
          售后服务部：{{ dataSource.fixCenterName }}
        </div>
        <div class="carInfo_item">备注：{{ dataSource.remark }}</div>
      </div>
      <div class="carInfo">
        <div class="carInfo_title">车辆信息</div>
        <div class="carInfo_item">
          采购合同号：{{ dataSource ? dataSource.purNo : '-' }}
        </div>
        <div class="carInfo_item">
          车架号：{{ dataSource ? dataSource.vinCode : '-' }}
        </div>
        <div class="carInfo_item">
          车辆公里数：{{
            dataSource && dataSource.carMiles != null
              ? dataSource.carMiles + 'km'
              : '-'
          }}
        </div>
        <div class="carInfo_item">
          钥匙数量：{{ dataSource ? dataSource.keyQty : '-' }}
        </div>
        <div class="carInfo_item">
          全新货物：{{ dataSource ? dataSource.newCarGo : '-' }}
        </div>
        <div class="carInfo_item">
          乙方买受人：{{ dataSource ? dataSource.buyer : '-' }}
        </div>
        <div class="carInfo_item">
          寄售车辆：{{
            dataSource ? (dataSource.consignmentCar ? '是' : '否') : '-'
          }}
        </div>
      </div>
      <div class="carInfo">
        <div class="carInfo_title">运输投保信息</div>
        <div class="carInfo_item">品牌采购：{{ dataSource.brandPurchase }}</div>
        <div class="carInfo_item">投保类型：{{ dataSource.insureType }}</div>
        <div class="carInfo_item">
          不投保原因：{{ dataSource.noInsureReason }}
        </div>
      </div>

      <div class="goBack" @click="goBack">返回</div>
      <!-- 审核情况 -->
      <AuditRecord
        :visible="auditVisible"
        :billId="dataSource.billId ? dataSource.billId : detailId"
        @close="auditVisible = false"
      ></AuditRecord>
    </div>
  </div>
</template>

<script>
import sellManageApi from '@/api/sellManageApi'
import AuditRecord from '@/components/AuditRecord'
export default {
  components: {
    AuditRecord,
  },
  data() {
    return {
      active: '',
      detailId: '', // 当前单据ID
      orderId: '', // 当前合同订单ID
      desBosType: '', // 单据类型 desBosType
      columns: [],
      tabIndex: 0,
      dataSource: {
        billId: '', //单据ID
        billNumber: '', //单据编号
        bizType: '', //入库类型
        bizTypeValue: '', //入库类型
        billStatus: '', //单据状态
        billStatusValue: '', //单据状态
        inWarehouse: '', //入库仓库
        inWarehouseId: '', //入库仓库ID
        bizDate: '', //入库时间
        departMentOrgName: '', //所属品牌
        departMentOrgNameId: '', //所属品牌Id
        inWarehouseId: '', //入库仓库ID
        showOrgName: '', //所属展厅
        showOrgId: '', //所属展厅
        preDate: '', //预计到达日期
        fixCenterName: '', //售后服务部
        fixCenterId: '', //售后服务部
        remark: '', //备注
        stockTransEntry: {
          entryId: '', //分录ID
          purNo: '', //	采购合同号
          vinCode: '', //车架号
          carMile: '', //公里数
          keyQty: '', //钥匙数量
          newCarGo: '', //全新货物
          buyer: '', //乙方买售人
          consignmentCar: '', //寄售车辆
        },
        brandPurchase: '', //品牌采购
        brandPurchaseValue: '', //品牌采购
        insureType: '', //投保类型
        insureTypeValue: '', //投保类型
        noInsureReason: '', //不投保原因
      },
      billNumber: '',
      auditBtn: '',
      auditVisible: false,
    }
  },
  mounted() {
    if (this.$route.query) {
      this.detailId = this.$route.query.billId
      this.orderId = this.$route.query.orderId
      this.desBosType = this.$route.query.desBosType
      this.billNumber = this.$route.query.billNumber

      console.log(this.detailId)
      console.log(this.orderId)
      console.log(this.desBosType)
      this.getList(this.orderId)
    }
  },
  methods: {
    getDetail() {
      sellManageApi
        .secondHandCarFacade({
          method: 'getPurchaeInWareHouseById', //固定值
          billId: this.columns[this.tabIndex].billId, //单据Id，必填，String
        })
        .then((res) => {
          if (res.code == 1) {
            this.dataSource = res.data
            if (this.dataSource.billStatus == '保存') {
              this.auditBtn = '编辑'
            } else {
              this.auditBtn = '审批情况'
            }
          }
        })
    },
    getList() {
      // 根据类型ID获取单据列表
      sellManageApi
        .secondHandCarFacade({
          method: 'getDestInfoBySourceIdAndDestBosType', //固定值
          userId: '', //用户ID，必填，String
          orgId: '', //登录组织Id，必填，String
          billId: this.orderId, //单据Id，必填，String
          desBosType: '227ACA06',
        })
        .then((res) => {
          if (res.code == 1) {
            if (res.data.length >= 1) {
              this.columns = res.data
              this.getDetail()
            } else {
              this.$toast.fail('暂无该单据')
            }
          } else {
            this.$toast.fail('暂无该单据')
          }
        })
    },

    handleClick(index) {
      this.tabIndex = index
      this.getDetail()
    },
    goBack() {
      this.$router.go(-1)
    },

    fileManage() {
      this.$router.push({
        path: '/fileMange',
        query: { billId: this.dataSource.billId },
      })
    },
    editApply() {
      if (this.dataSource.billStatus == '保存') {
        // if (this.dataSource.billStatus != "保存") {
        //   this.$toast.fail("该单据无法编辑");
        //   return;
        // }
        this.$router.push({
          path: '/CarStorgeEdit',
          query: {
            billId: this.columns[this.tabIndex].billId,
            orderId: this.orderId,
            billNumber: this.billNumber,
          },
        })
      } else {
        this.auditVisible = true
      }
    },
  },
}
</script>
<style lang="less" scoped>
.headerbox {
  width: 100%;
  overflow-x: auto;
  &::-webkit-scrollbar {
    display: none;
  }
}
.header_top {
  display: flex;
  align-self: center;
  padding: 0.2rem;
  overflow-x: auto;
  // width: 12rem;
  .header_item {
    width: 3rem;
    background: #fff;
    padding: 0.2rem 0.3rem;
    font-size: 0.24rem;
    border-radius: 5px;
    margin-right: 0.2rem;
    .txt {
      margin-bottom: 0.1rem;
    }
    &.active {
      border: 1px solid #ccc;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    }
  }
}
.carInfo {
  padding: 0.2rem;
  background: #fff;
  margin-bottom: 0.2rem;
  .source {
    padding-left: 0 !important;
    margin-bottom: 0.2rem;
    justify-content: space-between;

    .source_txt {
      font-size: 0.28rem;
    }
  }

  .carInfo_No {
    margin-bottom: 0.3rem;
    .carInfo_No_item {
      border-right: 1px solid #ccc;
      padding-right: 0.1rem;
      margin-right: 0.1rem;
      font-size: 0.24rem;
      color: #333;
      &:last-child {
        border: none;
      }
    }
  }
  .carInfo_item {
    font-size: 0.28rem;
    margin-bottom: 0.1rem;
    color: #333;
    .carInfo_item_price {
      width: 50%;
    }
  }
  .carInfo_title {
    font-size: 0.32rem;
    color: #333;
    margin-bottom: 0.2rem;
    font-weight: bold;
  }
}
.goBack {
  width: 80%;
  background: #2381e6;
  color: #fff;
  font-size: 0.28rem;
  margin: auto;
  border-radius: 5px;
  padding: 0.2rem;
  text-align: center;
  margin-bottom: 0.5rem;
}
</style>
